<template>
  <div>
    <el-card class="box-card" shadow="always">
      <div slot="header" :class="$style.clearfix">
        <span>蜂窝区域设置</span>
      </div>
      <cellular-area-config-header-form
        @onQuery="queryCellularAreaConfiguration"
        :topChannelList="topChannelList"
        :cityList="cityList"
        :querying="querying"
        ref="cellular"
      />
      <el-button type="warning" @click="onOpenImportModal">导入蜂窝信息</el-button>
      <el-button type="warning" @click="onOpenImportCompeteModal">导入蜂窝竞对信息</el-button>
      <el-button type="success" @click="exportCellularInfo" :loading="exporting">导出蜂窝信息</el-button>
      <el-button type="success" @click="exportCellularAndStoreInfo" :loading="exportLoading">导出蜂窝及门店信息</el-button>
    </el-card>
    <el-card class="box-card" shadow="always">
      <cellular-area-config-list-table
        v-bind="list"
        @pageSizeChange="pageSizeChange"
        @pageNumChange="pageNumChange"
        @openModifyModal="openModifyModal"
        @onDelete="onDelete"
      />
    </el-card>
    <!--  导入对话框  -->
    <import-cellular-modal
      :visible="importVisible"
      @close="onCloseImport"
      @resetTable="resetTable"
      :topChannelList="topChannelList"
    ></import-cellular-modal>
    <import-competes-modal
      :visible="importCompeteVisible"
      @close="onCloseImportCompete"
      @resetTable="resetTable"
      :topChannelList="topChannelList"
    ></import-competes-modal>
    <!-- 修改蜂窝信息 -->
    <modify-cellularInfo-modal
      :visible="isModifyInfoVisible"
      :cellularRowData="JSON.stringify(cellularRowData)"
      @onComfirm="onComfirmModifyModal"
      @onClose="onCloseModifyModal"
      @onDeleteStore="onDeleteStore"
    ></modify-cellularInfo-modal>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index.js';
export default Index;
</script>
